<template>
  <div id="app">
    <div id="backGroundImage">
      <div id="container">
        <canvas id="canvas"> 你的浏览器不支持canvas. Sorry~ </canvas>
        <span id="blue"></span>
        <span id="purple"></span>
        <span id="black"></span>
      </div>
    </div>
    <!-- 登陆信息栏 -->
    <div id="loginInfo">
      <!-- 头像 -->
      <el-image
        style="width: 5rem; height: 5rem"
        :src="icon"
        :fit="'fill'"
      ></el-image>
      <div style="font-size: 0.5rem; color: #909db7; margin: 1rem 0">
        您好，欢迎登陆
      </div>
      <!-- 输入用户名和密码的表单 -->
      <el-form
        ref="loginFormRef"
        id="loginForm"
        :model="loginForm"
        :rules="loginFormRules"
      >
        <!-- 输入用户名 -->
        <el-form-item label="" prop="userID">
          <el-input
            v-model="loginForm.userID"
            placeholder="请输入用户ID"
            clearable
            size="large"
          >
            <template #prepend> 账号 </template>
          </el-input>
        </el-form-item>
        <!-- 输入密码 -->
        <el-form-item label="" prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            show-password
            clearable
            size="large"
          >
            <template #prepend> 密码 </template>
          </el-input>
        </el-form-item>

        <!-- 提交表单按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            style="margin: 0 auto; width: 100%"
            size="large"
            @click="login"
            >登陆</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 注册提示 -->
      <div id="registered" @click="registered">还没有账号？立即注册</div>
      <el-alert title="2018213562-袁佳艺" type="success" center />
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { loginReq } from "@/networks/login.js";
import { createAnimation } from "../tools/createAnimation.js";
import { useStore } from "vuex";
export default {
  name: "login",
  setup() {
    const router = useRouter();
    const route = useRoute();
    const icon = require("../assets/image/地球.png");
    const store = useStore();
    //用户名和密码
    const loginForm = reactive({
      userID: 2018213562,
      password: 2018213562,
    });
    // 表单校验规则
    const loginFormRules = reactive({
      userID: [
        {
          required: true,
          message: "请输入用户名",
          trigger: "blur",
        },
        {
          min: 5,
          max: 15,
          message: "用户ID长度应为5-15位",
          trigger: "blur",
        },
      ],
      password: [
        {
          required: true,
          message: "请输入密码",
          trigger: "blur",
        },
        {
          min: 9,
          max: 15,
          message: "密码长度应为9-15",
          trigger: "blur",
        },
      ],
    });

    //登陆处理
    const login = async () => {
      try {
        const data = await loginReq({
          userid: loginForm.userID,
          password: loginForm.password,
        }); //发送登陆请求
        // console.log(data);
        if (data.data.status == 201) {
          // console.log("登陆成功");
          window.sessionStorage.setItem("token", "asdasdsadad11ew121");
          window.sessionStorage.setItem("userid", data.data.data.userid);
          window.sessionStorage.setItem("username", data.data.data.username);
          store.commit("saveUser", data.data.data);
          ElMessage.success("登陆成功");
          router.push(`/home/${window.sessionStorage.getItem("userid")}`); //跳转到主页
        } else if (data.data.status == 202) {
          ElMessage.error("账号或密码错误请检查");
        } else {
          ElMessage.error("登录失败，请稍后重试");
        }
      } catch (err) {
        console.log(err);
      }
    };
    //登陆验证

    //跳转注册页面
    function registered() {
      router.push("/registered");
    }
    return {
      loginForm,
      icon,
      loginFormRules,
      login,
      registered,
    };
  },
  methods: {},
  mounted() {
    createAnimation();
  },
};
</script>

<style lang="less" scoped>
#backGroundImage {
  width: 100vw;
  height: 100vh;
  background-color: #f4f5f5;
  // background-image: url("./../assets/image/earth.gif");
  // background-repeat: no-repeat;
  // background-size: cover;
}

#loginInfo {
  width: 20rem;
  height: 25rem;
  background-color: #f4f5f5;
  position: absolute;
  top: calc(50vh - 12.5rem);
  left: calc(50vw - 10rem);
  box-shadow: 5px 5px 20px rgb(216, 215, 215), -5px 5px 20px rgb(216, 215, 215),
    5px -5px 20px rgb(216, 215, 215), -5px -5px 20px rgb(216, 215, 215);
  display: flex;

  align-items: center;
  flex-direction: column;
}

.el-image {
  margin-top: 20px;
}

.el-input {
  width: 100%;
  margin-top: 2%;
}

.el-form-item {
  width: 100%;
}

html {
  overflow: hidden;
}

body {
  margin: 0px;
}

canvas {
  margin-left: -40px;
}

span {
  height: 7px;
  width: 20px;
  display: inline-block;
  cursor: pointer;
  position: absolute;
  top: 0px;
  transition: height 0.2s;
  -o-transition: height 0.2s;
  -moz-transition: height 0.2s;
  -webkit-transition: height 0.2s;
}

span:hover {
  height: 12px;
}

#blue {
  background-color: #367aec;
  left: 30px;
}

#purple {
  background-color: #f727d2;
  left: 50px;
}

#black {
  background-color: #000000;
  left: 70px;
}

#container {
  width: 100%;
}

#registered {
  font-size: 5px;
  text-decoration: black;
  cursor: pointer;
}
</style>
